<template>
  <div class="weather-detail">
    <template v-if="!weatherNowLoading">
      <air-quality :level="weatherNow.aq" />
      <div class="weather-info">
        <weather-info-item class="item" title="最高温" :val="weatherNow.tmp_max+'°C'"/>
        <weather-info-item class="item" title="最低温" :val="weatherNow.tmp_min+'°C'"/>
        <weather-info-item class="item" title="降雨量" :val="weatherNow.pcpn+'mm'"/>
        <weather-info-item class="item" title="相对湿度" :val="weatherNow.hum+'%'"/>
        <weather-info-item class="item" title="气压" :val="weatherNow.pres+'hPa'"/>
        <weather-info-item class="item" title="风向" :val="weatherNow.dir"/>
        <weather-info-item class="item" title="风力" :val="weatherNow.pow"/>
        <weather-info-item class="item" title="风速" :val="weatherNow.spd+'km/h'"/>
      </div>
    </template>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { AirQuality, WeatherInfoItem } from '@/components'

const { mapState, mapActions } = createNamespacedHelpers('Home')

export default {
  name: 'weather-detail',
  components: { AirQuality, WeatherInfoItem },
  computed: { ...mapState(['weatherNow', 'weatherNowLoading']) },
  methods: { ...mapActions(['getWeatherNow']) },
  mounted() {
    // this.getWeatherNow()
  }
}
</script>

<style lang="stylus">
.weather-detail {
  .weather-info {
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 50%;
    }
  }
}
</style>
